<template>
	<view class="contain-body">
		<view class="address-section marginB" @click="showAddPage">
			<view class="order-content">
				<uni-icons type="location" size="21" color="#FF8B07"></uni-icons>
				<view class="cen">
					<view class="checkAdd" v-if="showAdd">
						请选择收货地址
					</view>
					<view class="cen" v-else="!showAdd">
						<view class="top">
							<text class="name">{{addressData.name}}</text>
							<text class="mobile">{{addressData.mobile}}</text>
						</view>
						<text class="address">{{addressData.address}} {{addressData.area}}</text>
					</view>
				</view>

				<uni-icons type="forward" size="18" color="#333"></uni-icons>
			</view>
		</view>
		<view class="product marginB">
			<image :src="productData.url" mode="" class="imgSize"></image>
			<view class="flexCloum" style="margin-left: 20px;">
				<view class="">
					{{productData.phone}}
				</view>
				<view class="orangeTxt">
					*买断梯度价-越早买越优惠
				</view>
				<view class="flexCloum bgGrey">
					<view class="">
						规格：{{productData.phoneType}} 分期：{{productData.fenqi}}
					</view>
					<view class="">
						数量：{{productData.numberph}}
					</view>
				</view>
			</view>
		</view>
		<view class="tip">提示：快递运输期间不算分期，实际分期为快递签收当天</view>
		<view class="screen marginB">
			<text>碎屏换新（分期内保障）</text>
			<view class="flexBW margin10">
				<text>碎屏保障</text>
				<switch checked color="#FF8B07" style="transform:scale(0.5)" />
			</view>
			<view class="flexRow">
				<uni-icons type="info" size="13" color="#FF8B07"></uni-icons>
				磕碰挤压意外碎屏免费换屏
			</view>
		</view>
		<view class="by-stages marginB">
			<view class="flexBW marginB2">
				<text>首付金额</text>
				<text>￥-{{byStages.payment}}</text>
			</view>
			<view class="flexBW marginB2" style="color: #FF8B07;">
				<text>碎屏险</text>
				<text>￥{{byStages.insurance}}</text>
			</view>
			<view class="flexBW marginB2">
				<text>首付金额</text>
				<text>￥-{{byStages.payment2}}*1次</text>
			</view>
			<view class="flexBW marginB2">
				<text>总金额</text>
				<text>￥{{byStages.TotalAmount}}</text>
			</view>
			<view class="flexBW">
				<text>剩余还款计划</text>
				<view class="">
					<text>￥{{byStages.payment2}}*1次</text>+
					<text>￥{{byStages.payment}}</text>*5次
				</view>
			</view>
		</view>
		<view class="deposit marginB">
			<view class="flexBW">
				<text>押金</text>
				<text>￥{{deposit.depositMoney}}</text>
			</view>
			<view class="">
				点击"免押支付"，授权成功最高可免全额押金
			</view>
		</view>
		<view class="Remarks  marginB">
			<text>下单备注：</text>
			<view class="uni-input-wrapper">
				<input class="uni-input" placeholder="请输入备注" :value="inputClearValue" @input="clearInput" />
				<uni-icons type="clear" size="16" color="#a4a4a4" v-if="showClearIcon" @click="clearIcon"></uni-icons>
			</view>
		</view>
		<view class="comeback">
			审核不通过 押金原路返回
		</view>
		<view class="agreeBtn">
			<label class="radio">
				<radio value="r1" checked="true" color="#FF8B07" style="transform: scale(0.7);" />
				我已阅读并同意<text class="textOrang" @click="showProtocol">《分期相关协议》</text>与<text class="textOrang" @click="showPrivacy">《隐私协议》</text>
			</label>
			<view class="flexBW">
				<view class="">
					首期应付 <text class="font14">￥-{{byStages.payment}}</text>
				</view>
				<button class="paybtn" @click="showPayment">免押支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAdd: true,
				addressData: {
					name: '许小星',
					mobile: '13853989563',
					addressName: '金九大道',
					address: '山东省济南市历城区',
					area: '149号',
					// default: false,
				},
				byStages: {
					payment: 2029.75,
					payment2: 1.00,
					TotalAmount: 8400.00,
					insurance: 599,
				},
				deposit: {
					depositMoney: 16800,
				},
				productData: {
					url: '/static/iphone15.png',
					phone: 'iPhone 15',
					phoneType: '分期产品 粉色 512G',
					fenqi: '5',
					numberph: '1',
					default: false,
				},
				inputClearValue: '',
				showClearIcon: false,
			};
		},
		methods: {
			clearInput: function(event) {
				this.inputClearValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			showAddPage() {
				uni.navigateTo({
					url: "/pages/classify/add-Receiving-address/add-Receiving-address"
				})
			},
			showPayment(){
				uni.navigateTo({
					url: "/pages/classify/payment/payment"
				})
			},
			showProtocol(){
				uni.navigateTo({
					url: "/pages/classify/protocol-page"
				})
			},
			showPrivacy(){
				uni.navigateTo({
					url: "/pages/mine/order-List/order-details"
				})
			}
		}
	}
</script>

<style lang="less">
	.contain-body {
		padding: 15px;
		box-sizing: border-box;
		background: #f6f5f5;
		overflow-y: auto;
		padding-bottom: 86px;
	}

	.agreeBtn {
		width: 100%;
		background-color: #fff;
		padding: 10px 15px;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: 12px;

		.textOrang {
			color: #FF8B07;
		}

		.font14 {
			font-size: 14px;
		}

		.paybtn {
			background-color: #FF8B07;
			color: #fff;
			font-size: 14px;
			border-radius: 36px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			margin: 0;
			width: 150px;
		}
	}

	.flexCloum {
		display: flex;
		flex-direction: column;

	}

	.flexBW {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flexRow {
		display: flex;
		align-items: center;
	}

	.tip {
		font-size: 12px;
		color: red;
		margin-bottom: 10px;
	}

	.by-stages {
		padding: 10px;
		box-sizing: border-box;
		box-shadow: 1px 1px 5px #ddd;
		background: #fff;
		font-size: 12px;
	}

	.Remarks {
		padding: 10px;
		box-sizing: border-box;
		box-shadow: 1px 1px 5px #ddd;
		background: #fff;
		font-size: 12px;
		display: flex;
		align-items: center;

		.uni-input-wrapper {
			display: flex;
			align-items: center;
			width: calc(100% - 50px);
		}

		.uni-input {
			width: 100%;
		}
	}

	.comeback {
		background-color: #FF8B07;
		font-size: 10px;
		border-radius: 5px;

		color: #fff;
		width: 124px;
		padding: 2px 5px;
		box-sizing: border-box;
		text-align: center;
		margin-left: calc(50% - 62px);
	}

	.deposit {
		padding: 10px;
		box-sizing: border-box;
		box-shadow: 1px 1px 5px #ddd;
		background: #fff;
		font-size: 10px;
		color: #58bfff;
	}

	.checkAdd {
		display: flex;
		margin-left: 10px;
	}

	.product {

		padding: 10px;
		box-sizing: border-box;
		box-shadow: 1px 1px 5px #ddd;
		background: #fff;
		position: relative;
		display: flex;
		align-items: center;

		.imgSize {
			width: 100px;
			height: 100px;
		}

		.bgGrey {
			background-color: #f6f5f5;
			color: #6d6d6d;
			font-size: 10px;
			padding: 5px;
			box-sizing: border-box;
		}

		.orangeTxt {
			padding: 0 5px;
			box-sizing: border-box;
			color: #FF8B07;
			border: 1px solid #FF8B07;
			font-size: 10px;
			width: 131px;
			margin: 5px 0;
		}
	}

	.marginB {
		margin-bottom: 10px;
	}

	.marginB2 {
		margin-bottom: 5px;
	}

	.screen {
		padding: 10px;
		box-sizing: border-box;
		box-shadow: 1px 1px 5px #ddd;
		background: #fff;
		position: relative;
		font-size: 10px;

		.margin10 {
			margin: 10px 0;
		}
	}

	.address-section {
		padding: 10px;
		box-sizing: border-box;
		box-shadow: 1px 1px 5px #ddd;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: #333;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: #909399;
		}

		.icon-you {
			font-size: 32upx;
			// color: #333;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}
</style>
